<template>
  <div class="container userOnlineHistryContent bg-">
    <!-- <div class="row p-2"> -->
      <!-- 用户历史阅读书籍 -->
      <div class="row bg-white mb-2 p-2">
        <h5 class="col-12 p-2 border-bottom">我的书库</h5>
         <!-- 未登录时提示 -->
        <div v-if="readFlag" class="col-12 text-center mb-4">
          <p>—— 请登录后查看历史阅读书籍 ——</p>
        </div>

        <div v-if="this.$store.state.userOnlineHistry.length == 0 && !readFlag" class="col-12 text-center mb-4">
          <p>—— 您还未阅读过书籍 ——</p>
        </div>
        <div class="col-4 col-md-2 mb-2 text-center" v-for="(v , k) in this.$store.state.userOnlineHistry" style="font-size: .825em;">
          <router-link to='/bookDetails'>
            <img :src="v.images" class="img-fluid" alt="" @click="getInto(v.id)">
          </router-link>
          <div class="px-1 view-text">{{v.name}}</div>
        </div>
      </div>
      <!-- 推荐书籍 -->
      <div class="row bg-white p-2">
        <h5 class="col-12 p-2 border-bottom">推荐书籍</h5>
        <div class="col-4 col-md-2 mb-2 text-center" v-for="(v , k) in recommendBooks" style="font-size: .825em;">
          <router-link to='/bookDetails'>
            <img :src="v.images" class="img-fluid" alt="" @click="getInto(v.id)">
          </router-link>
          <div class="px-1 view-text">{{v.name}}</div>
        </div>
      </div>
    <!-- </div> -->
  </div>
</template>

<script>
  export default {
    name: 'UserOnlineHistryContent',
    data () {
      return {
        readFlag: true,
        recommendBooks: JSON.parse(localStorage.getItem('mobiBooks'))
      }
    },
    mounted() {
      if (localStorage.getItem('userInformation')) {
        this.readFlag = false;
        this.$store.dispatch('asynGetUserOnlineHistry', Number(JSON.parse(localStorage.getItem('userInformation')).id));
      } else {
        this.readFlag = true;
      }
    },
    methods: {
      getInto(index) {
        // 改变本地当前的书籍Id
        localStorage.setItem('booksId', index);
      }
    },
  }

</script>

<style scoped>
  .userOnlineHistryContent {
    margin-top: 10px;
    margin-bottom: 100px;
  }
  .view-text{
    display: inline-block;
    white-space: nowrap; 
    width: 100%; 
    overflow: hidden;
    text-overflow:ellipsis;
  }

  @media (max-width: 575px) {
    .userOnlineHistryContent {
      margin-top: 56px;
      margin-bottom: 0;
    }
  }
</style>